﻿const { menu, Card, Row, Col, Icon, Modal, Button, message, Popover} = antd;
const {LocaleProvider,locales} = window.antd;
var TargetID = '';
var GroupID = '';
class Protection extends React.Component {
    state = this.props;
	componentWillReceiveProps(props) {
		//	console.log('props=',props,'thisState=',this.state);
		this.setState(props);
	};
	constructor(props) {
		super(props);
	}
	menuEdit(type, dataObj){
		vui.Catch.menuEdit(type, dataObj);
	}
	menuDisable(type, dataObj){
		vui.Catch.menuDisable(type, dataObj);
	}
	menuDelete(type, dataObj){
		vui.Catch.menuDelete(type, dataObj);
    }

    handleSelect(ev) {
        GroupID = ev;
        vui.Catch.ChangeGroup({
            GroupID: GroupID,
            TargetID: TargetID
        })
    }
    handlePop(data) {
        TargetID = data.DictID
    }
	render() {
		const _this = this;
//		const {
//			RuleName,//规则名称
//			ProtectTypeID,//保护类型
//		} = this.state.data;
		console.log('规则列表=',this.state.data);	
        
		return(

			<Row gutter={20} className="block_masonry" style={{columnCount:3}}>
			{
				 _this.state.data ? _this.state.data.map((_tar,_n)=>
					
					
					<Col className="block_masonry_item">
	    				<Card
	            	style={{minHeight:'200px',marginBottom:'10px'}}
	            	type="inner"
	            	title={_tar.RuleName}
	            	extra={
	                <Dropdown trigger={['click']} placement="bottomCenter"
	                	overlay={
		                	<Menu>
							    <Menu.Item key="1" onClick={() => _this.menuEdit(_tar.ID,_tar)} ><Icon type="form" style={{paddingRight:'3px'}}/>编辑</Menu.Item>
									{
										_tar.Status==1? 
											<Menu.Item key="2" onClick={() => _this.menuDisable(_tar.ID,_tar)}>
												<Icon type="minus-circle-o" style={{paddingRight:'3px'}} />{'禁用'}
											</Menu.Item>
											:
											<Menu.Item key="2" onClick={() => _this.menuDisable(_tar.ID,_tar)}>
												<Icon type="check-circle-o" style={{paddingRight:'3px'}} />{'启用'}
											</Menu.Item>
									}
							    <Menu.Item key="3" onClick={() => _this.menuDelete(_tar.ID,_tar)}><Icon type="delete" style={{paddingRight:'3px'}} />删除</Menu.Item>
							  </Menu>
		                } >
								    <Icon className="f14" type="ellipsis" theme="outlined" style={{cursor:'pointer'}}/>
									</Dropdown>
	            	}
	            >
	            		<p style={{fontSize:'12px',color:'#ccc',textAlign:'center',marginBottom:'25px'}}>{_tar.RuleTypeName}</p>
	            		<ul class="drag_list" id={"drag_item"+_n} style={{padding:0,margin:0}}>
	            		{
                                        _tar.Status == 1 ?
                                            _tar.grouplist.length > 0 ?
                                                _tar.grouplist.map((target, index) =>

                                                    <Popover content={

                                                        <Select value={_tar.ID} style={{ width: 160 }} onChange={_this.handleSelect}>
                                                            {
                                                                _this.state.data.map(function (_target, _index) {
                                                                    if (_target.ID == _tar.ID) {
                                                                        return <Option value={_target.ID} disabled>{_target.RuleName}</Option>
                                                                    } else {
                                                                        return <Option value={_target.ID}>{_target.RuleName}</Option>
                                                                    }

                                                                })
                                                            }
                                                        </Select>


                                                    } title="变更" trigger="hover" onMouseEnter={() => _this.handlePop(target)}>
                                                        <li style={{ listStyle: 'none' }} className="ruleList ui-state-default" data-index={index}>
                                                            {target.DictName}
                                                        </li>
                                                    </Popover>
					            			)
            						:
            						<li className="text-c" style={{marginTop:'40px',listStyle:'none'}}>
				                		<img style={{width:'25px',verticalAlign:'bottom'}} src="../../Skin/Green/images/small.png" />
				                		<span style={{paddingLeft:'10px',display:'inline-block',lineHeight:'25px',color:'#bbb'}}>该规则没有被使用！</span>
				                	</li>
		        				:
		        				<li className="text-c" style={{marginTop:'40px',listStyle:'none'}}>
			                		<img style={{width:'25px',verticalAlign:'bottom'}} src="../../Skin/Green/images/small.png" />
			                		<span style={{paddingLeft:'10px',display:'inline-block',lineHeight:'25px',color:'#bbb'}}>该规则被禁用！</span>
			                	</li>
	            		}
	            		</ul>
	            </Card>
    			</Col>
				
				)
				:
				''
				
			}
			</Row>
    	
		);
	}
}